import React, { useEffect, useState } from 'react';
import "@/views/Login/Login.scss"

import * as service from '../../api/index'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message, notification } from 'antd';




import * as zzservice from '../../api/indexzz';
import { useNavigate } from "react-router-dom"
import { useDispatch } from 'react-redux'


interface Props {

}
function Login(props: Props) {
  let navigate = useNavigate();
  let dispatch=useDispatch()
  const onFinish = async (values: any) => {
    // console.log('Received values of form: ', values);

    // 返回数据
    var res3 = await zzservice.user_login(values)
    
    notification.success({ message: '账号登录成功!' });
    dispatch({ type:'SAVE_NAME',payload:values.username })
    localStorage.setItem('token',res3.data.data.token)
    navigate('/index')


// 假数据
    // var res = await service.user_user()
    // var t = res.data.find((item: any, index: any) => {
    //   return item.username == values.username && item.password == values.password
    // })
    // if (t) {
    //   dispatch({ type:'SAVE_NAME',payload:values })
    //   notification.success({ message: '账号登录成功!' });
    //   navigate('/index')
    // }


  };


  return (
    <div className='login'>
      <div className="nei">
        <div className="h1">
          <img src="	https://cdn7.axureshop.com/demo/2004033/images/%E7%99%BB%E5%BD%95/u1059.png" alt="" />
        </div>
        <div className="h2">登录</div>
        <div className="h3">欢迎登录OA办公后台管理系统</div>

        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '手机号码或工号不能为空!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号码或工号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '密码不能为空!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox className='za'>我已阅读并同意《用户隐私攻策》</Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" size='large' style={{ width: 300, marginBottom: 10 }}>
              登录
            </Button>
            <div className='zi'>忘记密码请联系管理员</div>

          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Login;